JavaScript makes a web page dynamic by watching for the user’s behaviour. HTML provides the structure/ framework for the web page and CSS provides the beauty, the colour and font.
Altogether, it makes the user’s experience on the web page interesting.
We can think of HTML as the foundation of a house - the wooden beams, the walls, the insulation, the roof; it provides the structure of a house.
CSS is the interior of the house - where a plant might go, the colour of your walls, the aesthetic of your kitchen; it provides the style and mood of the house.
JavaScript is the responsive mechanism within your house - the light switch, the tap, the doorbell, the locks on your door - all these things need a response in order for something to happen.
These provide activity to the house. Your house goes from a show home to a real working home!
Within JavaScript, code is executed from top to bottom, line by line.
But with control flow it will decide how to execute the code by responding to the user’s behaviour.
Within the code, this is done through loops and conditional statements.
Loops are used for when we are wanting to repeat a task based on a condition.
An example of control flow and loops in real life is like when you decide which restaurant to eat at:
DOM (Document Object Model) is a tool which allows developers to edit content (HTML) and the style (CSS) of a website.
To break it down further:
Document - the file produced when a web page is loaded.
Object - the HTML tag elements within the document.
Model - the layout of the document.
When a web page is loaded, the browser creates a DOM of the page.
Essentially, DOM is a way to represent all this data in a neat format which can be seen in one central place.
The DOM is structured like a family tree with the document as a starting point/ parent and then it breaks off into different branches of objects/children.
The branches are formed from the HTML tags that would contain CSS properties.
Since the DOM has all this data, an example of when you would interact with DOM is when you are coding and would want to see a specific part of your code play out, it will help you run for errors.
By using the DOM we are able to use it as a code text editor and can add CSS attributes to a page.
It is very helpful in that way!
Objects are a data type that contains properties. Properties are the values we use to describe the object.
To access a property of an object, we have to state which property we are wanting.
For example, if our object were cereal, the properties against them could look something like: brand: kellogg's, type: cornflakes, price: 4.99.
An array is a list of objects. With arrays, the data is stored in a sequence (starting from 0) and is accessed by its sequence number.
An example of an array is like a shopping list. On the shopping list we might have objects such as pads, cereal, red wine and oat milk. Pads would be 0 and oat milk is 3.
Depending on the type of data you are wanting to pull, you would use one of these.
A helpful question you might want to ask when accessing this data is, am I looking for data that is specific to an item?
Or am I needing an item within a list of things? Does the order of where the thing is matter?
Functions are a block of code that performs a task when it is executed. They are helpful because they are the reason why our code can run in JavaScript. They help keep our code tidy as we are able to condense multiple lines within a function.